<template>
    <el-row :gutter="20">
        <el-col :span="9">
            <el-card>
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    爬虫测试
                </div>
                <el-form label-position="left" label-width="80px" >
                    <el-form-item label="url">
                        <el-input size="mini" v-model="url" style="width:400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="规则ID">
                        <el-select size="mini" v-model="config_id" style="width:400px;" placeholder="请选择" filterable @change="ruleListSelected">
                            <el-option
                            v-for="item in ruleList"
                            :key="item.config_id"
                            :label="`${item.config_id}--${item.desc}`"
                            :value="`${item.config_id}`">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="站点ID">
                        <el-select size="mini" v-model="station_id" placeholder="请选择" style="width:400px;" filterable>
                            <el-option
                            v-for="item in grabSourceList"
                            :key="item.station_id"
                            :label="`${item.station_id}--${item.station_name_cn}`"
                            :value="`${item.station_id}`">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <span class="alert" style="padding-left: 0px;"><i class="el-icon-info"></i> 例如<br>
                            url: http://money.163.com/kechuangban/307 <br>
                            规则ID：307 <br>
                            站点ID：1234 <br>
                        </span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" :disabled="testLoading" :loading="testLoading" @click="testRule">开始测试</el-button>
                        <!--
                        <el-button type="primary" size="mini" :disabled="queryLoading" @click="getTestRuleResult">查看结果</el-button>
                        <el-button type="primary" size="mini" :disabled="saveLoading" @click="saveTestRuleResult">保存结果</el-button>
                        -->
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="15">
            <el-card style="height:790px">
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    测试结果
                </div>
                <div style="height: 710px;overflow-y: scroll">
                    <c-jsonTree :data="resultJSON"></c-jsonTree>
                    <!--
                    <c-jsonViewer
                        :value="resultJSON"
                        copyable
                        boxed
                        sort>
                    </c-jsonViewer>
                    -->
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import icon from 'vue-awesome';
import cronParser from 'cron-parser';
import dayjs from 'dayjs';
import JsonTree from 'vue-json-tree';
//import JsonViewer from 'vue-json-viewer';
import { getGrabSourceList, getRuleList, testRule, getTestRuleResult, saveTestRuleResult } from '../../api/crawl.js';
export default {
    components: {
        'c-icon' : icon,
        'c-jsonTree' : JsonTree,
        //'c-jsonViewer' : JsonViewer
    },
    data() {
        return {
            testLoading: false,
            queryLoading: false,
            saveLoading: true,

            ruleList: [],
            grabSourceList: [],
            url: '',
            config_id: '',
            station_id: '',
            resultJSON: '',
            ruleList : [],
        }
    },
    created() {
        this.initRuleList();
        this.initGrabSourceList();
    },
    watch: {
    },
    computed: {
    },
    mounted() {

    },
    methods: {
        initRuleList(){
            getRuleList().then(data=>{
                console.log(data)
                this.ruleList = data.rows;
            });
        },
        initGrabSourceList(){
            getGrabSourceList().then(data=>{
                this.grabSourceList = data.rows;
            });
        },
        async testRule(){
            let url = this.url.trim();
            let config_id = this.config_id;
            let station_id = this.station_id;
            this.testLoading = true;
            this.queryLoading = true;
            this.saveLoading = true;
            let res = await testRule({url, config_id, station_id});
            console.log('testRule-----', res);
            const this_ = this;
            //setTimeout(function(){
            this_.testLoading = false;
            this_.queryLoading = false;
            this_.resultJSON = this.formatJsonData(res.sMsg);
            this_.$message({
                message: '测试成功！',
                type: 'info'
            });
            //}, 1000 * 5);
        },
        async getTestRuleResult(){
            let url = this.url.trim();
            let config_id = this.config_id;
            let station_id = this.station_id;
            this.resultJSON = {};
            this.queryLoading = true;
            this.saveLoading = true;
            let res = await getTestRuleResult({url, config_id, station_id});
            if(res.iRet === 0){
                this.resultJSON = this.formatJsonData(res.sMsg);
                this.$message({
                    message: '获取成功！',
                    type: 'info'
                });
                if(this.resultJSON){
                    this.saveLoading = false;
                }
            }else{
                this.$message({
                    message: '获取失败！请等待几秒后再试!',
                    type: 'error'
                });
            }
            this.queryLoading = false;
            console.log('getTestRuleResult-----', res);
        },
        async saveTestRuleResult(){
            this.saveLoading = true;
            let res = await saveTestRuleResult({resultContent : ''});
            if(res.iRet === 0){
                this.$message({
                    message: '保存成功！',
                    type: 'info'
                });
            }
            this.saveLoading = false;
            console.log('saveTestRuleResult-----', res);
        },
        ruleListSelected(config_id){
            console.log('config_id---------', config_id)
            //let ruleList = this.ruleList.filter(item => item.config_id === Number(config_id));
            //this.url = ruleList[0].url_pattern;
        },
        formatJsonData(str){
            let obj = {};
            if(str){
                let jsonStr = str.replace(/(\r\n)|(\n)/g, '').replace(/(\")/g,'"');
                try{
                    obj = JSON.parse(jsonStr);
                }catch(e){
                    console.log(e);
                }
            }
            return obj;
        },
    }
};
</script>
<style>
.queryHistory{
    padding-top: 14px;
    font-size: 13px;
    color: grey;
    line-height: 1.8;
}
</style>



